{{define "/chat/private.shtml"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=width-device, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>IM</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
</head>
<body>
<div id="app" class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header">聊天中</div>
    <!--内容区-->
    <div class="mui-card-content">
        <ul id="content">
        </ul>
        <div class="mui-input-row">
            <input type="text" class="mui-input-clear" ref="input_message"/>
            <button type="button" class="mui-btn mui-btn-primary" @click="send">发送</button>
        </div>
    </div>
    <div class="mui-card-footer">
    </div>
</div>
</body>
<script>

    let router = new VueRouter({
        mode: 'history',
        routes: []
    });


    let wsClient

    var app = new Vue({
        router,
        el: '#app',
        data: {
            receiverId: "",
            senderId: ""
        },
        mounted: function () {

            this.receiverId = this.$route.query.dstId;
            this.senderId = this.$route.query.id;

            let chatUrl = "ws://localhost:8080/chat?id=" + this.$route.query.id;
            wsClient = new WebSocket(chatUrl)
            wsClient.onopen = function () {
                console.log("已与服务器[建立]连接.")
            }

            wsClient.onclose = function () {
                console.log("已与服务器[断开]连接.")
            }

            wsClient.onmessage = function (event) {
                let receiveMessage = event.data
                // 显示接收信息
                let content = document.getElementById("content");
                let li = document.createElement("li");
                li.innerText = receiveMessage;
                content.appendChild(li)
            }
        },
        methods: {
            send: function () {
                let message = this.$refs.input_message.value
                let package = {
                    senderId: this.sender,
                    receiverId: this.receiverId,
                    content: message
                }
                wsClient.send(JSON.stringify(package))
                // 显示接收信息
                let content = document.getElementById("content");
                let li = document.createElement("li");
                li.innerText = package.content;
                content.appendChild(li)
            }
        }
    })
</script>
</html>
{{end}}